<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/index.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            margin: 50px auto 0;
            display: block;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400">
        此浏览器不支持webgl
    </canvas>
</body>
</html>

<script>
    const ctx = document.getElementById('canvas')
    const gl = ctx.getContext('webgl')

    //着色器
    //创建着色器源码
    //顶点着色器
    const VERTEX_SHADER_SOURCE = `
        attribute vec4 aPosition;
        attribute float aScale;
        void main(){
            gl_Position = vec4(aPosition.x * aScale, aPosition.y * aScale, aPosition.z * aScale, 1.0);
            gl_PointSize = 30.0;
        }
    `
    //片元着色器
    const FRAGMENT_SHADER_SOURCE = `
        void main(){
            //gl_FragColor vec4(1.0, 0.0, 0.0, 1.0) vec4(r, g, b, a)
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
    `

    const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
    const aPosition = gl.getAttribLocation(program, 'aPosition')
    const aScale = gl.getAttribLocation(program, 'aScale')

    const points = new Float32Array([
        -0.5, -0.5,
        0.5, -0.5,
        0.0, 0.5
    ])

    //创建缓冲区对象
    const buffer = gl.createBuffer()
    //将缓冲区对象绑定到webgl上
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
    //将顶点数据写入到缓冲区对象中
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW)
    //给定点着色器中的attribute变量赋值
    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0)
    //激活变量
    gl.enableVertexAttribArray(aPosition)

    let x = 1
    setInterval(() => {
        x += 0.1
        if(x > 2){
            x = 1
        }
        gl.vertexAttrib1f(aScale, x);
        gl.drawArrays(gl.TRIANGLES, 0, 3)
    }, 60)
    
</script>